<script setup>
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useHomeDataStore } from '../stores/index.js';

const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const store = useHomeDataStore();
const tags = computed(() => store.state.tags);

console.log('当前标签:', tags.value);

const handlMenu = (tag) => {
  console.log('Clicked tag:', tag);
  
  try {
    // 优先使用 name 进行导航
    if (tag.name) {
      router.push({ name: tag.name });
    } else if (tag.path) {
      // 如果 name 不存在，使用 path
      router.push(tag.path);
    }
    store.selectMenu(tag);
  } catch (error) {
    console.error('Navigation error:', error);
    // 如果路由名称导航失败，尝试使用路径
    if (tag.path) {
      router.push(tag.path);
      store.selectMenu(tag);
    }
  }
};

const handleColose = (tag, index) => {
  store.updateMenu(tag);
  //如果点击的关闭的tag不是当前页面，直接关闭
  if (tag.name !== route.name) {
    return;
  }
  if (index === store.state.tags.length) {
    store.selectMenu(tags.value[index - 1]);
    router.push({
      name: tags.value[index - 1].name,
    });
  } else {
    store.selectMenu(tags.value[index]);
    router.push({ name: tags.value[index].name });
  }
};

// 获取标签显示文本的函数
const getTagTitle = (tag) => {
  if (tag.titleKey) {
    return t(tag.titleKey);
  }
  return tag.title || tag.name;
};
</script>

<template>
  <div class="tags">
    <el-tag
      v-for="(tag, index) in tags"
      :key="tag.name"
      :closable="tag.name !== 'home'"
      :effect="route.name === tag.name ? 'dark' : 'plain'"
      @click="handlMenu(tag)"
      @close="handleColose(tag, index)"
    >
      {{ getTagTitle(tag) }}
    </el-tag>
  </div>
</template>

<style scoped lang="less">
.tags {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid #dee2e6;
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
  }
}

:deep(.el-tag) {
  margin-right: 0;
  line-height: 32px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid #e1e5e9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
  min-width: 80px; // 确保最小宽度
  text-align: center;
  white-space: nowrap;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
  }

  /* 鼠标悬浮时改变颜色 */
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    
    &::before {
      left: 100%;
    }
  }

  /* 普通标签的颜色 */
  &.el-tag--plain {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
    color: #495057 !important;
    border-color: #dee2e6 !important;
    
    &:hover {
      background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%) !important;
      color: #409eff !important;
      border-color: #409eff !important;
    }
  }

  /* 激活标签的颜色 */
  &.el-tag--dark {
    background: linear-gradient(135deg, #409eff 0%, #3a8ee6 100%) !important;
    color: white !important;
    border-color: #409eff !important;
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
    
    &:hover {
      background: linear-gradient(135deg, #3a8ee6 0%, #337ecc 100%) !important;
    }
  }

  /* 自定义关闭按钮样式 */
  .el-tag__close {
    color: #909399;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 8px;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;

    &:hover {
      color: #f56c6c;
      background-color: rgba(245, 108, 108, 0.1);
    }
  }

  /* 标签文字样式 */
  span {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    max-width: 120px; // 限制文字最大宽度
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 确保首页标签不可关闭时的样式 */
:deep(.el-tag:not(.is-closable)) {
  .el-tag__close {
    display: none;
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .tags {
    padding: 10px 16px;
    gap: 8px;
  }
  
  :deep(.el-tag) {
    padding: 0 14px;
    font-size: 12px;
    line-height: 28px;
    min-width: 70px;
    
    span {
      max-width: 100px;
    }
  }
}

@media (max-width: 768px) {
  .tags {
    margin-left: 10px;
    padding: 3px 8px;
  }
  
  :deep(.el-tag) {
    padding: 0 15px;
    font-size: 12px;
    margin-right: 5px;
  }
}
</style>
